﻿<Page x:Name="page"
      x:Class="SubtitleEditor.View.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:SubtitleEditor.View"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"
      xmlns:control="using:SubtitleEditor.Controls"
      xmlns:vm="using:SubtitleEditor.ViewModel"
      NavigationCacheMode="Enabled"
      Loading="MainPage_Loading"
      Unloaded="MainPage_Unloaded"
      xmlns:triggers="using:SubtitleEditor.Controls.StateTriggers">
    <Page.Resources>
        <Storyboard x:Name="splitViewExpand">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                             Storyboard.TargetName="line"
                             To="12.33333333"
                             Duration="0:0:0.2" />
        </Storyboard>
        <Storyboard x:Name="splitViewClose">
            <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                             Storyboard.TargetName="line"
                             To="1"
                             Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="Navigating">
            <DoubleAnimation x:Name="tabTagTransform"
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"
                             Storyboard.TargetName="tabTag"
                             Duration="0:0:0.2">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <DataTemplate x:Key="TabTemplate"
                      x:DataType="vm:SplitViewTabData">
            <control:SplitViewTab Content="{x:Bind Content, Mode=OneWay}"
                                  Tag="{x:Bind PageType, Mode=OneWay}"
                                  IsChecked="{x:Bind IsChecked, Mode=OneWay}"
                                  Click="SplitViewTabButton_Click">
                <control:SplitViewTab.Icon>
                    <FontIcon Glyph="{x:Bind Icon, Mode=OneWay}"
                              FontSize="16" />
                </control:SplitViewTab.Icon>
                <ToolTipService.ToolTip>
                    <ToolTip Content="{x:Bind Content, Mode=OneWay}" />
                </ToolTipService.ToolTip>
            </control:SplitViewTab>
        </DataTemplate>
        <DataTemplate x:Key="ActionTemplate"
                      x:DataType="vm:SplitViewButtonData">
            <control:SplitViewButton Content="{x:Bind Content, Mode=OneWay}"
                                     Command="{x:Bind Command, Mode=OneWay}"
                                     Click="SplitViewCommand_Click">
                <control:SplitViewButton.Icon>
                    <FontIcon Glyph="{x:Bind Icon, Mode=OneWay}"
                              FontSize="16" />
                </control:SplitViewButton.Icon>
                <ToolTipService.ToolTip>
                    <ToolTip Content="{x:Bind Content, Mode=OneWay}" />
                </ToolTipService.ToolTip>
            </control:SplitViewButton>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Desktop" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="textBlockSubName.Visibility"
                                Value="Collapsed" />
                        <Setter Target="borderSubName.Visibility"
                                Value="Collapsed" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState>
                    <VisualState.StateTriggers>
                        <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Mobile" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="textBlockSubName.Visibility"
                                Value="Collapsed" />
                        <Setter Target="borderSubName.Visibility"
                                Value="Visible" />
                        <Setter Target="borderSubName.(Grid.Column)"
                                Value="0" />
                        <Setter Target="rowButtom.Height"
                                Value="48" />
                        <Setter Target="commandBar.(Grid.Row)"
                                Value="2" />
                        <Setter Target="inputPane.Margin"
                                Value="0,-48,0,0" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition x:Name="rowTop"
                           Height="48" />
            <RowDefinition />
            <RowDefinition Height="Auto" />
            <RowDefinition x:Name="rowButtom"
                           Height="0" />
        </Grid.RowDefinitions>
        <Border x:Name="inputPane"
                Grid.Row="2"
                Visibility="Collapsed"
                VerticalAlignment="Stretch"
                HorizontalAlignment="Stretch"/>
        <Border x:Name="borderSubName"
                Background="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
                Visibility="Collapsed">
            <TextBlock Style="{StaticResource SubtitleTextBlockStyle}"
                       Text="{x:Bind ViewModel.Title, Mode=OneWay}"
                       VerticalAlignment="Center"
                       Margin="16,0"
                       TextWrapping="NoWrap"
                       TextTrimming="CharacterEllipsis" />
        </Border>
        <SplitView x:Name="splitView"
                   DisplayMode="Overlay"
                   PaneClosing="splitView_PaneClosing"
                   SizeChanged="splitView_SizeChanged"
                   Grid.Row="1">
            <SplitView.Pane>
                <ScrollViewer VerticalScrollBarVisibility="Auto"
                              HorizontalScrollBarVisibility="Disabled">
                    <Grid x:Name="splitViewGrid"
                          SizeChanged="splitViewGrid_SizeChanged">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <!--The following two row is for spacing-->
                            <RowDefinition Height="24" />
                            <RowDefinition />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="tabTag"
                                   Grid.Row="2"
                                   Grid.RowSpan="999"
                                   Width="4"
                                   Height="48"
                                   Fill="{ThemeResource SystemControlForegroundAccentBrush}"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Top">
                            <Rectangle.RenderTransform>
                                <TranslateTransform />
                            </Rectangle.RenderTransform>
                        </Rectangle>
                        <ItemsControl ItemsSource="{x:Bind ViewModel.SplitViewButtons, Mode=OneWay}"
                                      Grid.Row="0"
                                      ItemTemplate="{StaticResource ActionTemplate}"/>
                        <Line x:Name="line"
                              Margin="12"
                              Width="24"
                              Stroke="{ThemeResource AppBarSeparatorForegroundThemeBrush}"
                              X2="24"
                              HorizontalAlignment="Left"
                              RenderTransformOrigin="0,0.5"
                              Grid.Row="1">
                            <Line.RenderTransform>
                                <CompositeTransform />
                            </Line.RenderTransform>
                        </Line>
                        <ItemsControl x:Name="documentTabs"
                                      ItemsSource="{x:Bind ViewModel.DocumentTabs, Mode=OneWay}"
                                      Grid.Row="2"
                                      ItemTemplate="{StaticResource TabTemplate}" />
                        <control:SplitViewTab DataContext="{x:Bind ViewModel.Preferences, Mode=OneWay}"
                                              Content="{x:Bind ViewModel.Preferences.Content, Mode=OneWay}"
                                              Tag="{x:Bind ViewModel.Preferences.PageType, Mode=OneWay}"
                                              IsChecked="{x:Bind ViewModel.Preferences.IsChecked, Mode=OneWay}"
                                              Click="SplitViewTabButton_Click"
                                              Grid.Row="999">
                            <control:SplitViewTab.Icon>
                                <FontIcon Glyph="{x:Bind ViewModel.Preferences.Icon, Mode=OneWay}"
                                          FontSize="16" />
                            </control:SplitViewTab.Icon>
                            <ToolTipService.ToolTip>
                                <ToolTip Content="{x:Bind ViewModel.Preferences.Content, Mode=OneWay}" />
                            </ToolTipService.ToolTip>
                        </control:SplitViewTab>
                    </Grid>
                </ScrollViewer>
            </SplitView.Pane>
            <Frame x:Name="frameInner"
                   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                   Navigated="frameInner_Navigated"/>
        </SplitView>
        <CommandBar x:Name="commandBar"
                    Grid.RowSpan="999"
                    VerticalContentAlignment="Stretch"
                    HorizontalContentAlignment="Stretch">
            <CommandBar.Content>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="48" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="48" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button x:Name="splitOverlayButton"
                            Style="{StaticResource NavigationBackButtonNormalStyle}"
                            Grid.RowSpan="2"
                            Width="48"
                            Height="Auto"
                            VerticalAlignment="Stretch"
                            Click="SplitViewButton_Click">
                        <Button.Content>
                            <TextBlock Text="&#xE700;"
                                       Margin="0,0,0,12" />
                        </Button.Content>
                        <ToolTipService.ToolTip>
                            <ToolTip Content="Menu" />
                        </ToolTipService.ToolTip>
                    </Button>
                    <TextBlock x:Name="textBlockSubName"
                               Grid.Column="1"
                               Style="{StaticResource SubtitleTextBlockStyle}"
                               Text="{x:Bind ViewModel.Title, Mode=OneWay}"
                               Margin="16,0"
                               VerticalAlignment="Center"
                               TextWrapping="NoWrap"
                               TextTrimming="CharacterEllipsis" />
                </Grid>
            </CommandBar.Content>
            <AppBarButton Label="Undo"
                          x:Uid="Undo"
                          Icon="Undo"
                          ToolTipService.ToolTip="{x:Bind ViewModel.DocumentView.UndoHint, Mode=OneWay}"
                          Command="{x:Bind ViewModel.DocumentView.Undo}" />
            <AppBarButton Label="Redo"
                          x:Uid="Redo"
                          Icon="Redo"
                          ToolTipService.ToolTip="{x:Bind ViewModel.DocumentView.RedoHint, Mode=OneWay}"
                          Command="{x:Bind ViewModel.DocumentView.Redo}" />
        </CommandBar>
    </Grid>
</Page>
